<template>
  <div id="app" >
    <split-drag-pane  @change="change" :span="10">
      <split-drag-pane default-percent="200px" vmid="1" @change="change">
        <div style="width: 100%;height: 100%;background-color: aqua;">
          1
        </div>
      </split-drag-pane>
      <split-drag-pane  vmid="2" default-percent="calc(70% - 200px)" @change="change" :span="20">
        <div style="width: 100%;height: 100%;background-color: bisque;">
          2
        </div>
      </split-drag-pane>
      <split-drag-pane default-percent="30" vmid="3" split="horizontal" @change="change">
        <split-drag-pane default-percent="30" vmid="3-1" @change="change">
          <div style="width: 100%;height: 100%;background-color: #07a1f3;">
            3-1
          </div>
        </split-drag-pane>
        <split-drag-pane default-percent="40" vmid="3-2" @change="change">
          <div style="width: 100%;height: 100%;background-color: #9cf3a9;">
            3-2
          </div>
        </split-drag-pane>
        <split-drag-pane default-percent="30" vmid="3-3" @change="change">
          <div style="width: 100%;height: 100%;background-color: #f3e0a7;">
            3-3
          </div>
        </split-drag-pane>
      </split-drag-pane>
    </split-drag-pane>
  </div>
</template>
<script>
import splitDragPane from "@/components/split-drag-pane/index.vue";
export default {
  components: {splitDragPane},
  data() {
    return {
      options:{
        global:true,
        span:10,
      }
    }
  },
  mounted() {

  },
  methods: {
    change(val,vmid){
      console.log("val,vmid",val,vmid)
    },
  }
}
</script>

<style scoped>

</style>
